<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- CSS -->
        <link rel="stylesheet" href="../../resources/css/bootstrap.min.css">
        <link rel="stylesheet" href="../../css/style.css">

    </head>
    <body>

    <div class="register-container" >
        <div class="register span6"  style="width:700px;">
            <form class="form-signin" id="login_form" action="" method="post">
                <h2>登  陆<span class="red"><strong>米米乐</strong></span></h2>
                    <div class="form-group">
                         <label for="username">用户名</label>
                         <input type="text" id="username" name="username" placeholder="请输入用户名" required>
                    </div>
                    <div class="form-group">
                         <label for="password">密&nbsp;&nbsp;&nbsp;码</label>
                         <input type="password" id="password" name="password" placeholder="请输入密码" required>
                    </div>
                    <div class="form-group">
                         <label for="check">验证码</label>
                         <input type="text" id="check" name="check" placeholder="请输入验证码" required>
                         <img src="/Kaptcha.jpg" id="captchaImage" onclick="javascript:refreshImage()"/>
                    </div>
                    <div class="form-group">
                         <button id="login_button">登  陆</button>
                         <button id="register_button" style="margin-top:2px;">注  册</button>
                    </div>
            </form>

           <!-- <form class="form-sign hidden" id="register_form" action="" method="post">
            <h2>注  册<span class="red"><strong>米米乐</strong></span></h2>
            <div class="form-group">
            <label>用户名</label>
            <input type="text" id="register_username" name="username" placeholder="请输入用户名" required>
            </div>
            <div class="form-group">
            <label>密&nbsp;&nbsp;&nbsp;码</label>
            <input type="password" id="register_password" name="password" placeholder="请输入密码" required>
            </div>
            <div class="form-group">
            <label>确认密码</label>
            <input type="password" id="register_repassword" name="repassword" placeholder="请确认密码" required><span id="rep_span" class="hidden" style="color: red;"></span>
            </div>
            <button id="register_submit">提  交</button>
            </form>-->
            </div>

    </div>
        <!-- Javascript -->
        <script src="../../resources/js/jquery-1.8.2.min.js"></script>
        <script src="../../resources/js/bootstrap.min.js"></script>
        <script src="../../resources/js/jquery.backstretch.min.js"></script>
        <script src="../../resources/js/scripts.js"></script>
    <!--<script src="js/login.js"></script>-->
    <script src="../../js/util.js"></script>
    <script>
        $(document).ready(function(){
            alert("第一种方法。");
            var alert_success = '<div id="alert_success" class="alert alert-success alert-dismissible feedback-float fade in text-center">'+
                            '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
                            '<span class="glyphicon glyphicon-ok"></span>' + '</div>';
            var alert_fail = '<div id="alert_fail" class="alert alert-danger alert-dismissible feedback-float fade in text-center">'+
                    '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
                    '<span class="glyphicon glyphicon-warning-sign"></span>' + '</div>';

            var login_button=document.getElementById("login_button");
            login_button.onclick=function() {
                var username=$("#username").val();
                var password=$("#password").val();
                var check=$("#check").val();
                alert(username + "--" + password + "--" + check)
                alert("login....");
            $.ajax({
                url: '/login',
                data: {"username": username, "password": password,"code":check},
                type: "POST",
                dataType: "json",
                success: function (data) {
                    alert(data.msg);
                    if(data.success){
                        $(".register-container").append(alert_success);
                    }else{
                        $(".register-container").append(alert_fail);
                    }
                        $("#alert_success").append('<span>'+ data.msg +'</span>');
                    window.location.href="/show.html";
                }
            });
                var register_button=document.getElementById("register_button");
                register_button.onclick=function() {
                    var username=$("#username").val();
                    var password=$("#password").val();
                    var check=$("#check").val();
                    alert(username + "--" + password + "--" + check)
                    alert("register......");
                    $.ajax({
                        url: '/register',
                        data: {"username": username, "password": password},
                        type: "POST",
                        dataType: "json",
                        success: function (data) {
                            alert(data.msg);
                            if(data.success){
                                $(".register-container").append(alert_success);
                            }else{
                                $(".register-container").append(alert_fail);
                            }
                            $("#alert_success").append('<span>'+ data.msg +'</span>');
                            window.location.href="/show.html";
                        }
                    });
                }
            function refreshImage() {
                document.getElementById("captchaImage").setAttribute("src",
                        "${pageContext.request.contextPath}/Kaptcha.jpg?" + Math.round(Math.random() * 10000));
            }
        }
        });

    </script>
</body>
</html>